<template>
	<view class="personalBox">
		<view class="headBox">
			<view class="forward">
				<img src="../../static/home.png" alt="" style="width: 40rpx;height:40rpx;" @click="index()">
				<p>团油</p>
			</view><!-- forward -->
			<view class="login">
				<view class="image"></view>
				<view class="djdl" @click="login()">点击登录</view>
				<view class="headset">
					<img src="../../static/rengong.png" alt="" style="width: 50rpx;height: 50rpx;">
				</view>
			</view><!-- login -->
		</view><!-- headBox结尾 -->
		<view class="bodyBox">
			<view class="boxOne">
				<p class="assets">我的资产</p>
				<view class="fourBox">
					<p>
						<span class="top">-元</span><br>
						<span class="bottom">加油金</span>
					</p>
					<p>
						<span class="top">-张</span><br>
						<span class="bottom">优惠券</span>
					</p>
					<p>
						<span class="top">-个</span><br>
						<span class="bottom">红包</span>
					</p>
					<p>
						<span class="top">-个</span><br>
						<span class="bottom">油滴</span>
					</p>
				</view>
			</view><!-- boxOne结尾 -->
			<view class="boxTwo">
				<img src="../../static/guanggao.jpg" alt="" style="width: 100%;height: 200rpx;" @click="advertising()">
			</view><!-- boxTwo结尾 -->
			<view class="boxThree">
				<p class="assets">常用工具</p>
				<view class="toolBox">
					<view class="tool">
						<img src="../../static/predict.jpg" style="width:50rpx;height:50rpx;">
						<p>油价预测</p>
					</view>
					<view class="tool">
						<img src="../../static/interests.jpg" style="width:50rpx;height:50rpx;">
						<p>车主权益</p>
					</view>
					<view class="tool">
						<img src="../../static/gift.jpg" style="width:50rpx;height:50rpx;">
						<p>我的礼品</p>
					</view>
					<view class="tool">
						<img src="../../static/collection.jpg" style="width:50rpx;height:50rpx;">
						<p>我的收藏</p>
					</view>
					<view class="tool">
						<img src="../../static/cooperation.jpg" style="width:50rpx;height:50rpx;">
						<p>我要合作</p>
					</view>
					<view class="tool">
						<img src="../../static/service.jpg" style="width:50rpx;height:50rpx;">
						<p>客服中心</p>
					</view>
					<view class="tool">
						<img src="../../static/licenses.jpg" style="width:50rpx;height:50rpx;">
						<p>公司证照</p>
					</view>
					<view class="tool">
						<img src="../../static/set.jpg" style="width:50rpx;height:50rpx;">
						<p>设置</p>
					</view>
				</view>

			</view><!-- boxThree结尾 -->
		</view><!-- bodyBox结尾 -->
		<!-- <button @click="login()">登录</button> -->
	</view><!-- personalBox结尾 -->
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			index() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			advertising() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style scoped>
	.headBox {
		border: 0px red solid;
		width: 100%;
		height: 360rpx;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background: linear-gradient(to right, #E4E8EF, #d9dbdc);
	}

	.forward {
		display: flex;
		justify-self: left;
		padding: 50rpx;
	}

	.forward p {
		font-size: 16px;
		margin-left: 20px;
	}

	.image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50px;
		background-color: #F6F6F6;
		background-image: url(../../static/touxiang.png);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.login {
		display: flex;
		justify-self: left;
		padding: 0 20px 0 20px;
	}

	.djdl {
		width: 70%;
		height: 140rpx;
		line-height: 140rpx;
		margin-left: 15px;
		font-size: 18px;
		font-weight: bold;
	}

	.headset {
		height: 140rpx;
	}

	.headset img {
		margin-top: 45rpx;
	}

	.bodyBox {
		width: 100%;
		position: relative;
		top: -50rpx;
	}

	.boxOne {
		border: 1px white solid;
		background-color: white;
		box-shadow: 0px 0px 5px #999;
		width: 83%;
		height: 200rpx;
		margin: 0 auto;
		border-radius: 10px;
		padding: 30rpx;
	}

	.assets {
		font-size: 18px
	}

	.fourBox {
		display: flex;
		justify-content: left;
		margin-top: 60rpx;
	}

	.fourBox p {
		width: 120rpx;
		text-align: left;
		height: 50px;
		margin-right: 70rpx;
	}

	.fourBox p:last-child {
		margin-right: 0;
	}

	.top {
		font-size: 32rpx;
	}

	.bottom {
		font-size: 28rpx;
		color: #595959;
	}

	.boxTwo {
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
		border-radius: 10px;
		margin-top: 25rpx;
	}

	.boxThree {
		box-shadow: 0px 0px 5px #999;
		width: 84%;
		height: 320rpx;
		margin: 0 auto;
		padding: 25rpx;
		border-radius: 10px;
		margin-top: 25rpx;

	}

	.toolBox {
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.tool {
		width: 19%;
		text-align: center;
		font-size: 28rpx;
		margin-top: 25rpx;
	}
</style>
